<template>
<el-container class="business">
    <el-header height="3rem">
        <div class="brand-log">
            <router-link to="/" tag="img" :src="require('../assets/imgs/home/brand-log.png')" alt=""></router-link>
        </div>
        <div class="top-bar">
            <el-menu :default-active="topBusState" mode="horizontal" text-color="#333333" active-text-color="#013D87">
                <el-menu-item index="/business/allBusiness" @click="changeState(true)">业务中心</el-menu-item>
                <el-menu-item index="/business/myBusiness" @click="changeState(false)">我的业务</el-menu-item>
            </el-menu>
        </div>
        <div class="client" @click="showButton($event)">
            <div class="client-info">
                <div class="icon-head"></div>
                <div class="welcom-text">欢迎 {{welcomText}} 客户</div>
            </div>
            <div class="button-box" ref="clientButton">
                <el-menu active-text-color="#fff" router>
                    <el-menu-item :index="basicInfo" @click="changeStyle">个人信息</el-menu-item>
                    <el-menu-item :index="passwordPath" @click="changeStyle">密码管理</el-menu-item>
                    <el-menu-item index="/login" @click="clearToken">退出登录</el-menu-item>
                </el-menu>
            </div>
        </div>
    </el-header>
    <router-view></router-view>
</el-container>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
    methods: {
        ...mapMutations([
            "changeTopState",
            "changeAllBusState",
            "changeAllBusStyle",
        ]),
        // 切换状态
        changeState(bool) {
            this.$router.push(bool ? this.allBusState : this.myBusState);
            this.changeTopState(
                bool ? "/business/allBusiness" : "/business/myBusiness"
            );
        },
        // 显示按钮
        showButton(e) {
            if (e.target.nodeName !== "DIV") return;
            this.$refs.clientButton.style.height = "7.5rem";
            e.stopPropagation();
        },
        //影藏按钮
        hiddenButton() {
            try {
                this.$refs.clientButton.style.height = "";
            } catch (err) {}
        },
        // 清楚token
        clearToken() {
            this.$http("/trademark/logout")
                .then(({ data: res }) => {
                    this.$message.success("退出成功");
                })
                .finally(() => {
                    this.hiddenButton();
                    sessionStorage.removeItem("token");
                    sessionStorage.removeItem("store");
                    this.$router.push("/login");
                    this.$store.commit("resetState");
                });
        },
        // 切换样式
        changeStyle() {
            this.changeTopState("/business/allBusiness");
            this.changeAllBusState(this.basicInfo);
            this.hiddenButton();
        },
    },
    computed: {
        ...mapGetters(["basicInfo", "passwordPath", "welcomText"]),
        ...mapState(["topBusState", "allBusState", "myBusState"]),
    },
    created() {
        document.addEventListener("click", this.hiddenButton);
    },
    beforeDestroy() {
        document.removeEventListener("click", this.hiddenButton);
    },
};
</script>

<style lang="less" scoped>
.business {
    height: 100vh;
    background-color: rgba(247, 247, 247, 1);

    &>.el-header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        padding: 0;
        box-shadow: 0 2px 10px -7px gray;
        background-color: #fff;

        .brand-log {
            width: 10rem;
            height: 2rem;
            position: relative;
            img{
                position: absolute;
                top: -5px;
                cursor: pointer;
            }
            
        }

        .top-bar {
            margin-left: 1rem;
            height: 100%;

            .el-menu {
                height: 100%;

                .el-menu-item {
                    font-size: 17px;
                    height: inherit;
                    line-height: 3rem;
                    border-bottom: 4px solid #013d87;
                    margin-left: 0.5em;
                }

                .is-active {
                    font-weight: bold;
                }
            }
        }

        .client {
            height: 2.5rem;
            margin-right: 2rem;
            margin-left: auto;
            position: relative;
            z-index: 3000;

            .button-box {
                position: absolute;
                top: 2.8rem;
                right: -20px;
                transition: height 0.3s;
                height: 0;
                overflow: hidden;

                .el-menu {
                    margin: 0;
                    width: 5rem;
                    font-size: 1.2em;

                    .el-menu-item {
                        color: #666666;
                        text-align: center;
                        height: 2.5rem;
                        line-height: 2.5rem;
                        border-bottom: 1px solid #cccccc;
                    }

                    .el-menu-item:last-child {
                        border: none;
                    }

                    .el-menu-item:not(.is-disabled):hover {
                        background-color: #013d87 !important;
                        color: white !important;
                    }

                    .is-active {
                        background-color: #013d87 !important;
                    }
                }
            }

            .client-info {
                height: inherit;

                .icon-head {
                    width: 2.5rem;
                    height: inherit;
                    float: right;
                    background: url(../assets/imgs/business/head.png) no-repeat;
                    background-size: 40px 40px;
                    background-position-y: 5px;
                }

                .welcom-text {
                    margin-right: 3.2rem;
                    height: inherit;
                    line-height: 2.5rem;
                    font-size: 16px;

                }
            }
        }
    }
}
</style>
